<template>
  <div class="DzIndex">
    <dz-index-header :IndexData="IndexData.helpTool"></dz-index-header>
    <div class="tabbar">
      <div class="wrapper" ref="wrapper">
        <div class="bscroll-container">
          <!-- 刷新提示信息 -->
          <div class="top-tip">
            <span class="refresh-hook">{{pulldownMsg}}</span>
          </div>
          <!-- 内容列表 -->
          <ul class="content">
            <dz-index-section :IndexData="IndexData"></dz-index-section>
          </ul>
          <!-- 底部提示信息 -->
          <div class="bottom-tip">
            <span class="loading-hook">{{pullupMsg}}</span>
          </div>
        </div>
      </div>

      <!-- alert提示刷新成功 -->
      <div class="alert-hook" :style="{display: alertHook}">刷新成功</div>
    </div>

    <dz-index-footer></dz-index-footer>
  </div>

</template>

<script>
    import "../assets/css/iconfont.css";
    import DzIndexHeader from "../components/DzIndex/DzIndexHeader";
    import DzIndexSection from "../components/DzIndex/DzIndexSection";
    import DzIndexFooter from "../components/DzIndex/DzIndexFooter";
    import IndexData from "../data/DzIndexData"
    import BScroll from "better-scroll"
    let count = 1
    export default {
      name: "DzIndex",
      components: {DzIndexFooter, DzIndexSection, DzIndexHeader},
      data(){
        return {
          IndexData,
          data: [0,1,2,3,4,5,6],
          pulldownMsg: '下拉刷新',
          pullupMsg: '加载更多',
          alertHook: 'none'
        }
      },
      methods: {
        getData() {
          return new Promise(resolve => {  //模拟数据请求
            setTimeout(() => {
              const arr = [];
              for (let i = 0; i < 20; i++) {
                arr.push(count++)
              }
              resolve(arr)
            }, 1000)
          })
        },
        refreshalert(){   //刷新成功提示
          this.alertHook = 'block';
          setTimeout(()=>{
            this.alertHook = 'none'
          },1000)
        }
      },
      created(){
        const that = this;
        this.$nextTick(() => {
          this.scroll = new BScroll(this.$refs.wrapper,{       //初始化better-scroll
            probeType:1,   //1 滚动的时候会派发scroll事件，会截流。2滚动的时候实时派发scroll事件，不会截流。 3除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
            click: true   //是否派发click事件
          })
          // 滑动过程中事件
          this.scroll.on('scroll',(pos)=>{
            if(pos.y > 30){
              this.pulldownMsg = '释放立即刷新'
            }
          });
          //滑动结束松开事件
          this.scroll.on('touchEnd',(pos) =>{  //上拉刷新
            if(pos.y > 30){
              setTimeout(()=>{
                that.getData().then((res)=>{
                  //刷新数据
                  that.data = res;
                  //恢复刷新提示文本值
                  that.pulldownMsg = '下拉刷新'
                  //刷新成功后提示
                  that.refreshalert();
                  //刷新列表后，重新计算滚动区域高度
                  that.scroll.refresh();
                })
              },2000)
            }
            else if(pos.y<(this.scroll.maxScrollY - 30)){   //下拉加载
              this.pullupMsg = '加载中。。。';
              setTimeout(()=>{
                that.getData().then((res)=>{
                  //恢复文本值
                  that.pullupMsg = '加载更多';
                  that.data = this.data.concat(res);
                  that.scroll.refresh();
                })
              },2000)

            }
          })
        })
      }


    }
</script>

<style scoped>
.DzIndex{
  height: 100%;
  display: flex;
  flex-direction: column;
}
.tabbar {
  flex: 1;
  overflow: auto;
}
.wrapper{
  width: 100%;
  height: 1350px;
  overflow: hidden;
  position: relative;
}

/*li{*/
  /*line-height: 50px;*/
  /*border-bottom: 1px solid #ccc;*/
  /*text-align: center;*/
/*}*/

/* 下拉、上拉提示信息 */
.top-tip{
  position: absolute;
  top: -40px;
  left: 0;
  z-index: 1;
  width: 100%;
  height:40px;
  line-height:40px;
  text-align:center;
  color: #555;
  font-size: 0.15rem;
}

.bottom-tip{
  width: 100%;
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: #777;
  background: #f2f2f2;
  position: absolute;
  bottom: 0px;
  left: 0;
  font-size: 0.15rem;
}


/* 全局提示信息 */
.alert-hook{
  display: none;
  position: fixed;
  top: 62px;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: #fff;
  font-size: 12px;
  background: rgba(7, 17, 27, 0.5);
}
</style>
